<script setup>
import { appScTransferCountUnsigned } from "@/services/transfer";
import topNav from "../../components/topNav.vue";
import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
import { appInfo } from "@/services/user";

import {
  nextTick,
  ref,
  watch,
  onMounted,
  onUnmounted,
  getCurrentInstance,
} from "vue";

import {
  chartBusiness,
  chartCategory,
  chartProduct,
  chartShop,
  chartPayType,
} from "@/services/index";
import { appShopSelector } from "@/services/transfer";

import { useUserStore } from "@/stores/user";
// import CustomizeTopBar from "../../pages/components/customize-top-bar/CustomizeTopBar.vue";
import useFormat from "@/hooks/format";

const showShop = ref(false);
const chartSelectIndex = ref(0);
const viH = ref(0);
const navT = ref(uni.getSystemInfoSync().statusBarHeight);
const loading = ref(true);

nextTick(() => {
  const instance = getCurrentInstance();

  const query = uni.createSelectorQuery().in(this);
  query
    .select("#topNum")
    .boundingClientRect((data) => {
      console.log("得到布局位置信息" + JSON.stringify(data));
      console.log("节点离页面顶部的距离为" + data.top);
      viH.value = data.height;
      console.log(viH.value);
    })
    .exec();
});

onLoad((e) => {});

onUnmounted(() => {});

onShow(() => {
  getChartBusiness();

  getappScTransferCountUnsigned();
});

const Time = (e) => {
  const date = new Date(e);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const saveFun = () => {};

const toNav = (url) => {
  uni.navigateTo({
    url: url,
  });
};

const totallObj = ref({});

const getappScTransferCountUnsigned = async () => {
  let res = await appScTransferCountUnsigned({});
  totallObj.value = res.data;
};

const chartSelect = (index) => {
  if (chartSelectIndex.value != index) {
    sortField.value = "";
    sortOrder.value = "";
    chartSelectIndex.value = index;
    pageIndex.value = 1;
    getDate(1);
  }
};

const upper = (e) => {
  console.log(e);
};
const lower = (e) => {
  console.log(e);
};
const scroll = (e) => {
  console.log(e);
};
const open = (e) => {};

//数据
const businessDet = ref({});
const chartCategoryList = ref([]);
const chartFoodsList = ref([]);
const chartShopList = ref([]);
const chartPayTypeList = ref([]);
const total = ref({});
const pageIndex = ref(1);
const pageSize = ref(30);

const getChartBusiness = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
      };
    } else {
      data = {
        datePick: selectItem.value.type,
      };
    }
  }
  let arr = [];
  if (selectDataList.value.length > 0) {
    selectDataList.value.forEach((item) => {
      arr.push(item.id);
    });
    data.shopIds = arr;
  }

  const res = await chartBusiness(data);
  businessDet.value = res.data;
};

const getChartCategory = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
      };
    } else {
      data = {
        datePick: selectItem2.value.type,
      };
    }
  }
  data.sortField = sortField.value;
  data.sortOrder = sortOrder.value;
  let arr = [];
  if (selectDataList.value.length > 0) {
    selectDataList.value.forEach((item) => {
      arr.push(item.id);
    });
    data.shopIds = arr;
  }
  const res = await chartCategory(data);
  chartCategoryList.value = res.data.data;
  total.value = res.data.total;
  loading.value = false;
};

const getChartShop = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
      };
    } else {
      data = {
        datePick: selectItem.value.type,
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
      };
    }
  }
  data.sortField = sortField.value;
  data.sortOrder = sortOrder.value;
  let arr = [];
  if (selectDataList.value.length > 0) {
    selectDataList.value.forEach((item) => {
      arr.push(item.id);
    });
    data.shopIds = arr;
  }
  const res = await chartShop(data);
  chartShopList.value = res.data.data;
  total.value = res.data.total;
  loading.value = false;
};

const getChartProduct = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
      pageIndex: 1,
      pageSize: 10,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
        pageIndex: 1,
        pageSize: 10,
      };
    } else {
      data = {
        datePick: selectItem.value.type,
        pageIndex: 1,
        pageSize: 10,
      };
    }
  }
  data.sortField = sortField.value;
  data.sortOrder = sortOrder.value;
  let arr = [];
  if (selectDataList.value.length > 0) {
    selectDataList.value.forEach((item) => {
      arr.push(item.id);
    });
    data.shopIds = arr;
  }
  const res = await chartProduct(data);
  chartFoodsList.value = res.data.data;
  total.value = res.data.total;
  loading.value = false;
};

const getChartPayType = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
      pageIndex: 1,
      pageSize: 10,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue.value + " 23:59:59",
        pageIndex: 1,
        pageSize: 10,
      };
    } else {
      data = {
        datePick: selectItem.value.type,
        pageIndex: 1,
        pageSize: 10,
      };
    }
  }
  data.sortField = "salesTotal";
  data.sortOrder = "desc";
  let arr = [];
  if (selectDataList.value.length > 0) {
    selectDataList.value.forEach((item) => {
      arr.push(item.id);
    });
    data.shopIds = arr;
  }

  const res = await chartPayType(data);
  chartPayTypeList.value = res.data.data;
  total.value = res.data.total;
  loading.value = false;
};

const goSetting = () => {
  uni.navigateTo({
    url: "/pages/mysetting/up/index",
  });
};

const goTo = (url) => {
  if (loading.value) return;
  console.log(url);
  if (url === 1) {
    return;
  }
  if (!url) {
    return showToast("暂未开放，敬请期待");
  }
  uni.navigateTo({ url });
};

const selectShow = ref(false);
const selectItem = ref({ type: 2, text: "昨天" });
const selectItem2 = ref({});
const datePick = ref([
  {
    type: 1,
    text: "今天",
  },
  {
    type: 2,
    text: "昨天",
  },
  {
    type: 3,
    text: "近7天",
  },
  {
    type: 4,
    text: "本周",
  },
  {
    type: 5,
    text: "本月",
  },
  {
    type: 6,
    text: "上周",
  },
  {
    type: 7,
    text: "上月",
  },
]);
const selectItemFun = (item, index) => {
  if (index == 1) {
    selectItem2.value = {};
    selectItem.value = item;
    selectShow.value = false;
    getChartBusiness();
    getChartCategory();
    getChartProduct();
    getChartShop();
  } else {
    if (item.type == 4) {
      selectItem.value = {};
      selectItem2.value = item;
    } else {
      selectItem.value = {};
      selectItem2.value = item;
      selectShow.value = false;
      getChartBusiness();
      getChartCategory();
      getChartProduct();
      getChartShop();
    }
  }
};

const getDate = (index) => {
  loading.value = true;
  if (chartSelectIndex.value == 0) {
    getChartShop(index);
  }

  if (chartSelectIndex.value == 1) {
    getChartCategory(index);
  }

  if (chartSelectIndex.value == 2) {
    getChartPayType(index);
  }
};

const showtime = ref(false);
const timevalue = ref(Time(Date.now()));
const datetimePickerRef = ref(null);
onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
const formatter = (type, value) => {
  if (type === "year") {
    return `${value}年`;
  }
  if (type === "month") {
    return `${value}月`;
  }
  if (type === "day") {
    return `${value}日`;
  }
  return value;
};
const confirmDate = (e) => {
  let dateobj = new Date(e.value);

  if (showtime.value == true) {
    minTime.value = e.value;
    timevalue.value =
      dateobj.getFullYear() +
      "-" +
      (dateobj.getMonth() + 1 < 10
        ? "0" + (dateobj.getMonth() + 1)
        : dateobj.getMonth() + 1) +
      "-" +
      (dateobj.getDate() < 10 ? "0" + dateobj.getDate() : dateobj.getDate());
    selectItem.value = {};
    selectItem2.value = { type: 4, text: timevalue.value };
    showtime.value = false;
    selectShow.value = false;
    showtime2.value = true;

    // getChartBusiness();
    // getChartCategory();
    // getChartProduct();
  } else {
    timevalue2.value =
      dateobj.getFullYear() +
      "-" +
      (dateobj.getMonth() + 1 < 10
        ? "0" + (dateobj.getMonth() + 1)
        : dateobj.getMonth() + 1) +
      "-" +
      (dateobj.getDate() < 10 ? "0" + dateobj.getDate() : dateobj.getDate());
    selectItem.value = {};
    selectItem2.value = { type: 4, text: timevalue.value };
    showtime2.value = false;
    selectShow.value = false;

    getChartBusiness();
    getChartCategory();
    getChartProduct();
    getChartShop();
  }
};

const caseIndex = ref(10);

const toMorePage = () => {
  caseIndex.value = caseIndex.value + 10;
};

const sortField = ref("");
const sortOrder = ref("");
const sortFun = (str) => {
  console.log(str, sortField.value, sortOrder.value);
  if (sortField.value == str) {
    console.log("111", sortOrder.value);
    sortField.value = str;
    // sortOrder.value=sortOrder.value=='desc'?'asc':sortOrder.value=='desc'?'':'desc'
    if (sortOrder.value == "desc") {
      sortOrder.value = "asc";
    } else if (sortOrder.value == "asc") {
      sortOrder.value = "";
    } else if (sortOrder.value == "") {
      sortOrder.value = "desc";
    }

    console.log(2, sortOrder.value);
  } else {
    sortField.value = str;
    sortOrder.value = "desc";
    console.log(1, sortOrder.value);
  }
  getDate(1);
};

//用户店铺
const introData = ref([]);
const selectShopNum = ref(0);
const selectDate = ref([]);

const getList = async () => {
  try {
    // 发送请求
    let res = await appInfo({});
    if (res.code == 200) {
      selectDataList.value = [];
      res.data.employees.forEach((item) => {
        item.select = true;
        // selectDataList.value.push(item);
      });
      introData.value = res.data.employees;
      introData.value.forEach((item2) => {
        item2.select = true;
        if (item2.select) {
          selectDataList.value.push(item2);
        }
      });

      selectShopNum.value = res.data.employees.length;
      getDate(1);
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};
// getList();

const getAppShopSelector = async () => {
  try {
    // 发送请求
    let res = await appShopSelector({});
    if (res.code == 200) {
      selectDataList.value = [];
      res.data.datas.forEach((item) => {
        item.select = true;
        selectDataList.value.push(item);
      });

      introData.value = res.data.datas;
      selectShopNum.value = res.data.datas.length;
      getChartBusiness();
      getChartCategory();
      getChartProduct();
      getChartShop();
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

getAppShopSelector();

const selectShop = (item) => {
  item.select = !item.select;
  let num = 0;

  introData.value.forEach((item) => {
    if (item.select) {
      num++;
    }
  });
  selectShopNum.value = num;
  //     introData.value = res.data.employees;
};

const selectDataList = ref([]);

const cancel = () => {
  let num = 0;
  showShop.value = false;

  if (selectDataList.value.length > 0) {
    introData.value.forEach((item2) => {
      item2.select = false;
    });

    selectDataList.value.forEach((item) => {
      introData.value.forEach((item2) => {
        if (item2.id == item.id) {
          item2.select = true;
          num++;
        }
      });
    });
    selectShopNum.value = num;
  }
};
const qrFun = () => {
  if (selectShopNum.value < 1) {
    return uni.showToast({
      title: "请选择门店",
      icon: "none",
    });
  }
  showShop.value = false;
  selectDataList.value = [];

  introData.value.forEach((item2) => {
    if (item2.select) {
      selectDataList.value.push(item2);
    }
  });

  getDate(1);
};

//区间选择
const showtime2 = ref(false);
const timevalue2 = ref(Time(Date.now()));
const minTime = ref(Date.now());

//无网状态
const connected = () => {
  getAppShopSelector();
};
</script>

<template>
  <view class="bg">
    <top-nav :title="'库存查询'" @save="saveFun" :border="false" rType="auto">
      <template #center>
        <!-- <text>销售分析</text> -->
        <view class="center-top" @click="showShop = true"
          ><text>已选择{{ selectShopNum }}门店 </text
          ><up-icon name="arrow-down" color="#2979ff" size="25rpx"></up-icon
        ></view>
      </template>
      <template #right>
        <view class="center-right" @click="selectShow = true">
          <text>{{
            selectItem.text
              ? selectItem.text
              : selectItem2.text
              ? selectItem2.text
              : ""
          }}</text>
          <up-icon name="calendar" color="#333333" size="34rpx"></up-icon>
        </view>
      </template>
    </top-nav>

    <view class="count" id="topNum">
      <view class="count-k">
        <view class="count-k-title"> 总销售额 </view>
        <view class="count-k-num">￥{{ businessDet.salesTotalAmount }}</view>
        <view class="count-list">
          <view class="count-list-item">
            <view class="count-list-item-title"> 总实收 </view>
            <view class="count-list-item-num">
              {{ businessDet.salesTotal }}
            </view>
          </view>
          <view class="count-list-item">
            <view class="count-list-item-title"> 订单数 </view>
            <view class="count-list-item-num">
              {{ businessDet.orderCount }}
            </view>
          </view>
          <view class="count-list-item">
            <view class="count-list-item-title"> 利润 </view>
            <view class="count-list-item-num">
              {{ businessDet.grossProfit }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="num-list">
      <view class="chart-title-left">
        <view class="chart-title-item">
          <text
            @click="chartSelect(0)"
            :class="chartSelectIndex == 0 ? 'chart-title-item-active' : ''"
            >按门店</text
          >
          <view
            class="chart-title-item-x"
            v-if="chartSelectIndex == 0 && !loading"
          >
            <view class="chart-title-item-lines"></view>
          </view>
        </view>
        <view class="chart-title-item">
          <text
            @click="chartSelect(1)"
            :class="chartSelectIndex == 1 ? 'chart-title-item-active' : ''"
            >按商品分类</text
          >
          <view
            class="chart-title-item-x"
            v-if="chartSelectIndex == 1 && !loading"
          >
            <view class="chart-title-item-lines"></view>
          </view>
        </view>
        <view class="chart-title-item">
          <text
            @click="chartSelect(2)"
            :class="chartSelectIndex == 2 ? 'chart-title-item-active' : ''"
            >按支付方式</text
          >
          <view
            class="chart-title-item-x"
            v-if="chartSelectIndex == 2 && !loading"
          >
            <view class="chart-title-item-lines"></view>
          </view>
        </view>
      </view>
      <view class="info-item-top" v-if="chartSelectIndex == 0">
        <text>总计 </text>销售订单<text class="bc_color">{{
          total.orderCount
        }}</text
        >单 销售金额<text class="bc_color">{{
          total.salesTotalAmount || 0
        }}</text
        >元 实收金额<text class="bc_color">{{ total.salesTotal || 0 }}</text
        >元
      </view>
      <view class="info-item-top" v-if="chartSelectIndex == 1">
        <text>总计: </text>销售订单<text class="bc_color">{{
          total.orderNum || 0
        }}</text
        >单 销售金额<text class="bc_color">{{ total.salesAmount || 0 }}</text
        >元
      </view>
      <view class="info-item-top" v-if="chartSelectIndex == 2">
        <text>总计 </text> 销售金额<text class="bc_color">{{
          total.payAmount || 0
        }}</text
        >元
      </view>
      <view class="jl-content">
        <scroll-view
          v-if="
            (chartShopList.length > 0 && chartSelectIndex == 0) ||
            (chartCategoryList.length > 0 && chartSelectIndex == 1) ||
            (chartPayTypeList.length > 0 && chartSelectIndex == 2)
          "
          :scroll-top="0"
          scroll-y="true"
          :style="
            'height: calc(100vh - 88rpx - 214rpx - ' +
            viH +
            'px - ' +
            navT +
            'px)'
          "
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <scroll-view
            class="scroll-view_H"
            scroll-x="true"
            @scroll="scroll"
            scroll-left="0"
          >
            <view
              id="demo1"
              class="scroll-view-item_H"
              :style="'width:' + (chartSelectIndex == 0 ? '130%' : '100%')"
            >
              <view v-if="chartSelectIndex == 0">
                <view class="tb tb-head">
                  <view class="one">门店</view>
                  <view class="two">
                    <view class="shure" @click="sortFun('salesTotalAmount')"
                      ><text>销售额</text>
                      <view class="shure-icon">
                        <up-icon
                          class="play-left-fill"
                          name="play-left-fill"
                          :color="
                            sortField == 'salesTotalAmount' &&
                            sortOrder == 'asc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                        <up-icon
                          class="play-right-fill"
                          name="play-right-fill"
                          :color="
                            sortField == 'salesTotalAmount' &&
                            sortOrder == 'desc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                      </view>
                    </view>
                  </view>
                  <view class="three">
                    <view class="shure" @click="sortFun('orderCount')"
                      ><text>订单数</text>
                      <view class="shure-icon">
                        <up-icon
                          class="play-left-fill"
                          name="play-left-fill"
                          :color="
                            sortField == 'orderCount' && sortOrder == 'asc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                        <up-icon
                          class="play-right-fill"
                          name="play-right-fill"
                          :color="
                            sortField == 'orderCount' && sortOrder == 'desc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                      </view>
                    </view>
                  </view>
                  <view class="form">
                    <view class="shure" @click="sortFun('salesTotal')"
                      ><text>实收</text>
                      <view class="shure-icon">
                        <up-icon
                          class="play-left-fill"
                          name="play-left-fill"
                          :color="
                            sortField == 'salesTotal' && sortOrder == 'asc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                        <up-icon
                          class="play-right-fill"
                          name="play-right-fill"
                          :color="
                            sortField == 'salesTotal' && sortOrder == 'desc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                      </view>
                    </view>
                  </view>
                  <view class="five">
                    <view class="shure" @click="sortFun('grossProfit')"
                      ><text>利润</text>
                      <view class="shure-icon">
                        <up-icon
                          class="play-left-fill"
                          name="play-left-fill"
                          :color="
                            sortField == 'grossProfit' && sortOrder == 'asc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                        <up-icon
                          class="play-right-fill"
                          name="play-right-fill"
                          :color="
                            sortField == 'grossProfit' && sortOrder == 'desc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view v-if="chartSelectIndex == 1">
                <view class="tb tb-head">
                  <view class="one">分类</view>
                  <view class="two">
                    <view class="shure" @click="sortFun('salesTotal')"
                      ><text>销售额</text>
                      <view class="shure-icon">
                        <up-icon
                          class="play-left-fill"
                          name="play-left-fill"
                          :color="
                            sortField == 'salesTotal' && sortOrder == 'asc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                        <up-icon
                          class="play-right-fill"
                          name="play-right-fill"
                          :color="
                            sortField == 'salesTotal' && sortOrder == 'desc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                      </view>
                    </view>
                  </view>
                  <view class="three">
                    <view class="shure" @click="sortFun('orderCount')"
                      ><text>订单数</text>
                      <view class="shure-icon">
                        <up-icon
                          class="play-left-fill"
                          name="play-left-fill"
                          :color="
                            sortField == 'orderCount' && sortOrder == 'asc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                        <up-icon
                          class="play-right-fill"
                          name="play-right-fill"
                          :color="
                            sortField == 'orderCount' && sortOrder == 'desc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                      </view>
                    </view>
                  </view>
                  <view class="form">占比</view>
                  <!-- <view class="five">利润</view> -->
                </view>
              </view>
              <view v-if="chartSelectIndex == 2">
                <view class="tb tb-head">
                  <view class="one">支付类型</view>
                  <view class="two">
                    <view class="shure" @click="sortFun('salesTotal')"
                      ><text>销售额</text>
                      <view class="shure-icon">
                        <up-icon
                          class="play-left-fill"
                          name="play-left-fill"
                          :color="
                            sortField == 'salesTotal' && sortOrder == 'asc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                        <up-icon
                          class="play-right-fill"
                          name="play-right-fill"
                          :color="
                            sortField == 'salesTotal' && sortOrder == 'desc'
                              ? '#2979ff'
                              : '#C9CDD4'
                          "
                          size="18rpx"
                        ></up-icon>
                      </view>
                    </view>
                  </view>

                  <view class="form">占比</view>
                </view>
              </view>
              <view v-if="chartSelectIndex == 0">
                <view
                  class="tb"
                  v-for="(item, index) in chartShopList"
                  :key="index"
                >
                  <view class="one">
                    <view class="one-pm">{{ index + 1 }}</view>
                    <view class="one-pm-to">
                      <text>{{ item.shopName }}</text></view
                    >
                  </view>
                  <view class="two">{{ item.salesTotalAmount }}</view>
                  <view class="three">{{ item.orderCount }}</view>
                  <view class="form">{{ item.salesTotal }}</view>
                  <view class="five">{{ item.grossProfit }}</view>
                </view>
              </view>
              <view v-if="chartSelectIndex == 1">
                <view
                  class="tb"
                  v-for="(item, index) in chartCategoryList"
                  :key="index"
                >
                  <view class="one">
                    <view class="one-pm">{{ index + 1 }}</view>
                    <view class="one-pm-to">
                      <text>{{ item.categoryName }}</text></view
                    >
                  </view>
                  <view class="two">{{ item.salesAmount }}</view>
                  <view class="three">{{ item.orderNum }}</view>
                  <view class="form">{{ item.salesAmountPercentage }}%</view>
                </view>
              </view>
              <view v-if="chartSelectIndex == 2">
                <view
                  class="tb"
                  v-for="(item, index) in chartPayTypeList"
                  :key="index"
                >
                  <view class="one">
                    <view class="one-pm">{{ index + 1 }}</view>
                    <view class="one-pm-to">
                      <text>{{ item.payTypeName }}</text></view
                    >
                  </view>
                  <view class="two">{{ item.payAmount }}</view>
                  <view class="form">{{ item.payAmountPercentage }}%</view>
                </view>
              </view>

              <!-- <view class="top">2131233</view> -->
            </view>
          </scroll-view>
        </scroll-view>
        <no-Data
          style="padding-bottom: 200rpx; margin-top: 10rpx"
          text="暂无数据"
          v-if="
            ((chartShopList.length <= 0 && chartSelectIndex == 0) ||
              (chartCategoryList.length <= 0 && chartSelectIndex == 1) ||
              (chartPayTypeList.length <= 0 && chartSelectIndex == 2)) &&
            !loading
          "
        ></no-Data>
      </view>
    </view>
  </view>

  <up-popup
    :show="showShop"
    mode="top"
    @close="cancel"
    :safeAreaInsetTop="true"
    @open="open"
  >
    <view class="popup">
      <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
        <view
          class="popup_item"
          v-for="(item, index) in introData"
          :key="index"
          @click="selectShop(item)"
        >
          <view class="popup_item_left"
            ><text></text> <text>{{ item.name }}</text>
          </view>

          <view class="popup_item_right">
            <view class="popup_item_right_o" v-if="!item.select"></view>
            <image
              v-if="item.select"
              src="@/static/manage/select.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </scroll-view>

      <view style="width: 100%; height: 30rpx"></view>

      <view class="popup_bt">
        <view class="popup_bt_qx" @click="cancel">取消</view>
        <view class="popup_bt_qr" @click="qrFun"
          >确认({{ selectShopNum }})</view
        >
      </view>
    </view>
  </up-popup>

  <up-popup
    :closeable="true"
    :show="selectShow"
    @close="selectShow = false"
    :safeAreaInsetBottom="true"
    @open="open"
    round="15"
  >
    <view class="popup-content">
      <view class="popup-content-title" @click="showtime = false">取消</view>
      <view class="popup-content-selTop">快捷选择</view>
      <view class="kj-select">
        <view
          class="kj-select-item"
          :class="selectItem.type == item.type ? 'kj-select-item-seleect' : ''"
          v-for="(item, index) in datePick"
          :key="index"
          @click="selectItemFun(item, 1)"
        >
          {{ item.text }}
        </view>
      </view>
      <view class="popup-content-selTop">自定义</view>
      <view class="kj-select">
        <view
          class="kj-select-item"
          :class="selectItem2.type == 1 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 1, text: '今日' }, 2)"
        >
          今日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 2 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 2, text: '昨日' }, 2)"
          >昨日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 3 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 3, text: '近7日' }, 2)"
        >
          近7日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 4 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 4, text: '自定义' }, 2)"
        >
          自定义
        </view>
      </view>
      <view class="kj-select" v-if="selectItem2.type == 4">
        <view
          class="kj-select-item kj-select-item2"
          :class="showtime ? 'kj-select-item-seleect' : ''"
          @click="
            showtime = true;
            selectShow = false;
          "
        >
          {{ timevalue }}
        </view>
        <view>-</view>
        <view
          class="kj-select-item kj-select-item2"
          :class="showtime2 ? 'kj-select-item-seleect' : ''"
          @click="
            showtime2 = true;
            selectShow = false;
          "
          >{{ timevalue2 }}
        </view>
      </view>
      <view class="bt-text"> </view>
    </view>
  </up-popup>

  <up-datetime-picker
    title="开始时间"
    class="top-center"
    ref="datetimePickerRef"
    :hasInput="false"
    @close="showtime = false"
    @confirm="confirmDate"
    @cancel="showtime = false"
    format="YYYY-MM-DD"
    :show="showtime"
    v-model="timevalue"
    :formatter="formatter"
    :closeOnClickOverlay="true"
    mode="date"
  >
  </up-datetime-picker>

  <up-datetime-picker
    class="top-center"
    title="结束时间"
    ref="datetimePickerRef"
    :hasInput="false"
    @close="showtime2 = false"
    @confirm="confirmDate"
    @cancel="showtime2 = false"
    format="YYYY-MM-DD"
    :show="showtime2"
    v-model="timevalue2"
    :formatter="formatter"
    :closeOnClickOverlay="true"
    :minDate="minTime"
    mode="date"
  >
  </up-datetime-picker>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
